<!-- 学区分析 -->
<template>
  <ScreenAdapter>
    <!--  百度地图背景  -->
    <bMap v-if="pointArr.length === 0"></bMap>
    <bMap v-else :centerPoint="centerPoint" :point="pointArr" :polygon="polygon" :polygonColor="polygonColor" :clearOverlays="clearOverlays" @onMarkerClick="onMarkerClick"></bMap>
    <!--    顶部标题栏    -->
    <div class="container_top-xqfx">
      <div class="topleft">
        <p class="active">学区分析</p>
        <p @click="$router.push('/yubaom')">预报名分析</p>
        <p @click="$router.push('/shishibaoming')">实时报名</p>
        <p @click="$router.push('/xueweitiaoji')">学位调剂</p>
      </div>
      <p>{{ cityname }}.学区分析</p>
      <div class="topright">
        <div>
          统计时间：
          <!--          :popper-append-to-body="false"-->
          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localYear" @change="onSelectChange">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="selectbox">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!--   左侧图表   -->
    <div class="sidebox-xqfx">
      <!--  学校总览    -->
      <div class="maintitle"><p>学校总览</p></div>
      <div class="mainbox">
        <div class="mainbox_content">
          <div class="flexcenter">
            <p style="margin-right:10px;">在计学校</p>
            <rollNum :num="baseinfo.schoolCount" :num-l=5></rollNum>
            <p style="margin-left:10px;">所</p>
          </div>
          <div class="normaltxt" style="text-align: center; margin-bottom:10px;">同比增加 (所)<span
            class="keyyellow up">{{ baseinfo.schoolIncreaseCount }}</span>所
          </div>
          <div class="progressbox1" style="margin-top:15px;">
            <div :class="'progresscurbox'+index" v-for="(item,index) in baseinfo.data"
                 :key=index :style="{'width':item.percent+'%'}"></div>
          </div>
          <div class="flexbetween">
            <div v-for="(item,index) in baseinfo.data"
                 :key=index
                 :class="'baseprogresslist baseprogresslist_'+index">
              <p>{{ item.name }} (所)</p>
              <p class="normaltxt">
                <span class="keyblue" style="padding-left: 15px;">
                  {{ item.name === '民办学校' ? item.schoolMbCount : item.schoolGbCount }}
                </span>
                {{ item.percent }}%
              </p>
            </div>
          </div>
        </div>
      </div>
      <!--   近五年增长趋势   -->
      <div class="maintitle"><p>近五年增长趋势</p></div>
      <div class="mainbox">
        <v-chart :option="chartLine" style="width:100%; height:180px"></v-chart>
      </div>
      <!--   学校/区域排名   -->
      <div class="maintitle"><p>区域/学区排名</p></div>
      <div class="mainbox">
        <v-chart :option="chart2Bar" style="width:100%; height:190px"></v-chart>
      </div>
      <!--   学校/学位排名   -->
      <div class="maintitle"><p>学校/学位排名</p></div>
      <div class="mainbox">
        <div class="mainbox_content">
          <div class="wrap-table head">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 15%"/>
                <col style="width: 45%"/>
                <col style="width: 20%"/>
                <col style="width: 20%"/>
              </colgroup>
              <thead>
              <tr>
                <th>排名</th>
                <th>学校名称</th>
                <th>属性</th>
                <th>学位总数</th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="wrap-table body" style="height:140px; overflow: auto">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 15%"/>
                <col style="width: 45%"/>
                <col style="width: 20%"/>
                <col style="width: 20%"/>
              </colgroup>
              <tr v-for="(item,index) in top10data" :key="index">
                <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                </td>
                <td>
                  <div>{{ item.schoolName }}</div>
                </td>
                <td>
                  {{ item.schoolNatureName }}
                </td>
                <td>
                  {{ item.studentJhCount }}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--  中间图表  -->
    <div class="midbox-xqfx">
      <div class="flexbetween midtopbox" style="justify-content: space-around">
        <div class="midtopcontent">
          <p class="normaltxt">本地户籍数 (个)</p>
          <rollNum :num="middata.bdrs" :num-l=5></rollNum>
        </div>
        <div class="midtopcontent">
          <p class="normaltxt">外地户籍数 (个)</p>
          <rollNum :num="middata.wdrs" :num-l=5></rollNum>
        </div>
        <div class="midtopcontent">
          <p class="normaltxt">计划招生 (人)</p>
          <rollNum :num="middata.jhcount" :num-l=5></rollNum>
        </div>
        <div class="midtopcontent">
          <p class="normaltxt">当前适龄人员 (人)</p>
          <rollNum :num="middata.slcount" :num-l=5></rollNum>
        </div>
      </div>
      <div class="flexbetween" style="margin-top:10px;">
        <div class="mapname"><p>{{ mapname }}</p></div>
        <div class="mapcontrolbox">
          <!--          <p :class="mapcontrol===0?'blue active':'blue'" @click="mapcontrol=0">学区</p>-->
          <!--          <p :class="mapcontrol===1?'green active':'green'" @click="mapcontrol=1">小学</p>-->
          <!--          <p :class="mapcontrol===2?'yellow active':'yellow'" @click="mapcontrol=2">初中</p>-->
          <!--          <p :class="mapcontrol===3?'lightblue active':'lightblue'" @click="mapcontrol=3">重叠区域</p>-->
        </div>
        <div>
<!--          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localcity" :popper-append-to-body="false">-->
<!--            <el-option-->
<!--              v-for="item in cityList"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--              class="selectbox">-->
<!--            </el-option>-->
<!--          </el-select>-->
          <el-input v-model="searchtxt" placeholder="请输入学校名称" style="width:260px;"></el-input>
          <el-button class="btn" @click="renovateData">搜索</el-button>
        </div>
      </div>
    </div>
    <!--  右侧图表  -->
    <div class="rightbox-xqfx">
      <div class="mainbox_content" style="padding:16px;">
        <!--  地址总览  -->
        <div class="maintitle"><p>地址总览</p></div>
        <div class="mainbox">
          <div class="mainbox_content">
            <div class="flexcenter">
              <p style="margin-right:10px;">累计地址</p>
              <rollNum :num="addressInfo.addressCount" :num-l=5></rollNum>
              <p style="margin-left:10px;">个</p>
            </div>
            <div class="normaltxt" style="text-align: center; margin-bottom:10px;">同比增加 <span
              class="keyyellow up">{{ addressInfo.addressIncreaseCount }}</span>个
            </div>
            <div class="progressbox1" style="margin-top:15px;">
              <div :class="'progresscurbox'+index" v-for="(item,index) in addressInfo.data"
                   :key=index :style="{'width':item.percent+'%'}"></div>
            </div>
            <div class="flexbetween">
              <div v-for="(item,index) in addressInfo.data"
                   :key=index
                   :class="'baseprogresslist baseprogresslist_'+index">
                <p>{{ item.name }} (所)</p>
                <p class="normaltxt">
                  <span class="keyblue" style="padding-left: 15px;">{{
                      item.name === '已分配学区' ? item.addressFpCount : item.addressWfpCount
                    }}</span>
                  {{ item.percent }}%
                </p>
              </div>
            </div>
          </div>
        </div>
        <!--       学校地址数排名       -->
        <div class="maintitle"><p>学校地址数排名</p></div>
        <div class="mainbox">
          <div class="mainbox_content">
            <div class="wrap-table head">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 15%"/>
                  <col style="width: 65%"/>
                  <col style="width: 20%"/>
                </colgroup>
                <thead>
                <tr>
                  <th>排名</th>
                  <th>学校名称</th>
                  <th>地址数</th>
                </tr>
                </thead>
              </table>
            </div>
            <div class="wrap-table body" style="height:140px; overflow: auto">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 15%"/>
                  <col style="width: 65%"/>
                  <col style="width: 20%"/>
                </colgroup>
                <tr v-for="(item,index) in schAddressArr" :key="index">
                  <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                  </td>
                  <td>
                    <div>{{ item.name }}</div>
                  </td>
                  <td>
                    {{ item.type }}
                  </td>
                  <td>
                    {{ item.value }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!--      近五年学校地址增长趋势        -->
        <div class="maintitle"><p>近五年学校地址增长趋势</p></div>
        <div class="mainbox">
          <v-chart :option="chartLineAddress" style="width:100%; height:180px"></v-chart>
        </div>
        <div class="maintitle"><p>地址来源分析</p></div>
        <!--              <v-chart :option="chartBar" style="width:100%; height:260px"></v-chart>-->
        <!--        <v-chart :option="chartPie0" style="width:100%; height:190px"></v-chart>-->
        <div class="mainbox">
          <div ref="pieRef" style="width:100%; height:190px"></div>
        </div>
      </div>
    </div>
    <!--  底部操作  -->
    <div class="bottom-xqfx">
      <div class="schoolcontrolbox school0" v-if="schoolcontrol===null">
        <p @click="onBottomClick(2)">只看小学</p>
        <p class="active">全部学校</p>
        <p @click="onBottomClick(3)">只看初中</p>
      </div>
      <div class="schoolcontrolbox school1" v-if="schoolcontrol===2">
        <p class="active">只看小学</p>
        <p @click="onBottomClick(null)">全部学校</p>
        <p @click="onBottomClick(3)">只看初中</p>
      </div>
      <div class="schoolcontrolbox school2" v-if="schoolcontrol===3">
        <p @click="onBottomClick(2)">只看小学</p>
        <p @click="onBottomClick(null)">全部学校</p>
        <p class="active">只看初中</p>
      </div>
    </div>
  </ScreenAdapter>
</template>
<script>
import autoPage from '../utils/autoPage'
import VChart from 'vue-echarts'
import rollNum from '../components/rollNum'
import bMap from '../components/bMap'
import ScreenAdapter from '../components/ScreenAdapter'

const echarts = require('echarts')
export default {
  name: 'xuequfenxi',
  components: {
    ScreenAdapter,
    VChart,
    rollNum,
    bMap
  },
  extends: autoPage,
  data () {
    return {
      // 是否清除所有覆盖物
      clearOverlays: {
        flag: false
      },
      // 是否存在下一页数据
      hasNextPage: true,
      // 实时页码
      pageNum: 0,
      // 颜色索引
      colorIndex: -1,
      // 覆盖物颜色
      polygonColor: '',
      // 地图显示标志
      showMap: false,
      // 地图中心坐标
      centerPoint: {},
      // 学校地图坐标
      pointArr: [],
      // 学校范围坐标组
      polygon: [],
      // 浏览器的视口宽度
      width: 1980,
      // 浏览器的视口高度
      height: 1080,
      cityname: '东阳市',
      localYear: new Date().getFullYear(),
      yearList: [
        {label: '2022年', value: '2022'},
        {label: '2021年', value: '2021'},
        {label: '2020年', value: '2020'},
        {label: '2019年', value: '2019'},
        {label: '2018年', value: '2018'}
      ],
      // 学校总览
      baseinfo: {
        totalval: '',
        tbzj: '',
        data: [
          {name: '民办学校', value: '', percent: ''},
          {name: '公办学校', value: '', percent: ''}
        ]
      },
      addressInfo: { // 地址总览
        addressCount: 1234,
        addressIncreaseCount: 2345,
        data: [
          {name: '已分配学区', addressFpCount: 100, percent: 10},
          {name: '未分配学区', addressWfpCount: 900, percent: 90}
        ]
      },
      // 近五年学校地址增长趋势
      addressData: [],
      // 近五年增长趋势
      zzqsdata: [],
      quyutopdata: [ // 区域/学区排名
        {
          name: '学位数',
          value: [
            // {name: '某某某区域1', value: 1230},
            // {name: '某某某学区1', value: 985},
            // {name: '某某某区域2', value: 854},
            // {name: '某某某学区2', value: 756},
            // {name: '某某某区域3', value: 555}
          ]
        },
        {
          name: '预测需求数',
          value: [
            // {name: '某某某区域1', value: 1052},
            // {name: '某某某学区1', value: 885},
            // {name: '某某某区域2', value: 654},
            // {name: '某某某学区2', value: 156},
            // {name: '某某某区域3', value: 155}
          ]
        }
      ],
      top10data: [ // 学校/学位排名
        // {schoolName: '某某某某某某某学校', schoolNatureName: '公办', value: 34590},
        // {schoolName: '某某某某某某某学校', schoolNatureName: '公办', value: 34590},
        // {schoolName: '某某某某某某某学校', schoolNatureName: '公办', value: 34590},
        // {schoolName: '某某某某某某某学校', schoolNatureName: '公办', value: 34590},
        // {schoolName: '某某某某某某某学校', schoolNatureName: '公办', value: 34590},
        // {schoolName: '某某某某某某某学校', schoolNatureName: '公办', value: 34590}
      ],
      // 学校地址数排名
      schAddressArr: [],
      middata: {
        xuequdizhi: 1900, // 学区地址数
        schoolCount: 1234, // 学校总数
        studentJhCount: 12345, // 计划招生
        studentSlCount: 12343 // 当前适龄人员
      },
      mapname: '东阳市',
      searchtxt: '', // 地图搜索
      localcity: '', // 选择的乡镇街道
      cityList: [ // 乡镇街道列表
        {label: '白云街道', value: 'B1'},
        {label: '六石街道', value: 'L1'},
        {label: '马宅镇', value: 'M1'},
        {label: '南市街道', value: 'N1'},
        {label: '南马镇', value: 'N2'},
        {label: '千祥镇', value: 'Q1'},
        {label: '三单乡', value: 'S1'},
        {label: '市属学校', value: 'S2'},
        {label: '吴宁街道', value: 'W1'},
        {label: '巍山镇', value: 'W2'},
        {label: '佐村镇', value: 'Z1'},
        {label: '城东街道', value: 'C2'},
        {label: '其他', value: 'Z2'},
        {label: '东江镇', value: 'D1'},
        {label: '歌山镇', value: 'G1'},
        {label: '虎鹿镇', value: 'H1'},
        {label: '湖溪镇', value: 'H2'},
        {label: '横店镇', value: 'H3'},
        {label: '画水镇', value: 'H4'},
        {label: '江北街道', value: 'J1'}
      ],
      mapcontrol: 0, // 学校筛选控制，0：学区，1：小学，2：初中，3：重叠区域
      schoolcontrol: null, // 学校筛选控制，null：全部，1：幼儿园，2：小学, 3: 初中
      xuexiaotype: 0, // 学校类别
      xuexiaodata: [ // 学校预报名信息
        {
          name: 'A类',
          total: 123456,
          data: [
            {
              name: '某某某某学校1',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            }
          ]
        },
        {
          name: 'B类',
          total: 234123,
          data: [
            {
              name: '某某某某学校1',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            }
          ]
        },
        {
          name: 'C类',
          total: 123456,
          data: [
            {
              name: '某某某某学校1',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            },
            {
              name: '某某某某学校',
              type: '公办',
              city: '某某区县',
              value: 1234
            }
          ]
        }
      ],
      schooldata: {
        type: '公办',
        name: '某某某某某学校',
        address: '某某省某某市某某区某某路123号',
        jihua: 12234, // 计划招生人数
        jihuaadd: 23, // 计划招生增加
        manbanlv: 69, // 近三年满班率
        zongdizhi: 234122, // 总地址数
        xueweishu: 1234, // 学位总数
        dizhidata: [ // 地址条形图
          {name: '地址名称1', value: 1000, percent: 65},
          {name: '地址名称2', value: 500, percent: 50},
          {name: '地址名称3', value: 400, percent: 40},
          {name: '地址名称4', value: 300, percent: 30},
          {name: '地址名称5', value: 200, percent: 20},
          {name: '地址名称6', value: 100, percent: 10},
          {name: '地址名称7', value: 100, percent: 10}
        ],
        xueshengdata: [ // 学校近五年学生数
          {
            name: '学区内',
            value: [
              {name: '2018', value: 1234},
              {name: '2019', value: 2145},
              {name: '2020', value: 3201},
              {name: '2021', value: 2585},
              {name: '2022', value: 1852}
            ]
          },
          {
            name: '学区外',
            value: [
              {name: '2018', value: 908},
              {name: '2019', value: 1232},
              {name: '2020', value: 2312},
              {name: '2021', value: 2451},
              {name: '2022', value: 1234}
            ]
          }
        ]
      }
    }
  },
  computed: {
    chartLine () {
      let data = this.zzqsdata
      let color = ['rgba(83,226,255', 'rgba(255,185,54', 'rgba(255, 160, 10, 1)']
      return {
        color: color,
        legend: {
          show: true,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '20%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '人数：万人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item, index) => {
          return {
            name: item.name,
            type: 'line',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            itemStyle: {
              color: color[index] + ',1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[index] + ',0.5)'
                  },
                  {
                    offset: 1,
                    color: color[index] + ', 0)'
                  }
                ],
                global: false
              }
            }
          }
        })
      }
    },
    chartLineAddress () {
      let data = this.addressData
      let color = ['rgba(83,226,255', 'rgba(255,185,54', 'rgba(255, 160, 10, 1)']
      return {
        color: color,
        legend: {
          show: true,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '20%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '地址数：个',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item, index) => {
          return {
            name: item.name,
            type: 'line',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            itemStyle: {
              color: color[index] + ',1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[index] + ',0.5)'
                  },
                  {
                    offset: 1,
                    color: color[index] + ', 0)'
                  }
                ],
                global: false
              }
            }
          }
        })
      }
    },
    chartLine2 () {
      let data = this.zzqsdata
      let color = ['rgba(83,226,255', 'rgba(255,185,54', 'rgba(255, 160, 10, 1)']
      return {
        color: color,
        legend: {
          show: true,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '20%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '人数：万人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item, index) => {
          return {
            name: item.name,
            type: 'line',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            itemStyle: {
              color: color[index] + ',1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[index] + ',0.5)'
                  },
                  {
                    offset: 1,
                    color: color[index] + ', 0)'
                  }
                ],
                global: false
              }
            }
          }
        })
      }
    },
    chartPie0 () {
      let data = {name: '地址来源分析', value: this.schooldata.manbanlv}
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            itemStyle: {
              normal: {
                color: '#46C88C',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartBar () {
      let data = this.schooldata.xueshengdata
      let color = ['#077CDC', '#46C88C', '#46C88C', '#FFB936']
      return {
        color: color,
        legend: {
          show: true,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '25%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          //
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '单位：万人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item) => {
          return {
            name: item.name,
            type: 'bar',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            barWidth: 4

          }
        })
      }
    },
    chart2Bar () {
      let data = this.quyutopdata
      // let color = ['#077CDC', '#46C88C', '#46C88C', '#FFB936']
      let myData = data[0].value.map(item => item.name)
      return {
        legend: {
          top: '5%',
          left: '30%',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 80,
          // icon: 'horizontal',
          textStyle: {
            color: '#ffffff',
            fontSize: 14
          },
          data: data.map(item => item.name)
        },
        grid: [{
          show: false,
          left: '10%',
          top: '10%',
          bottom: '5%',
          containLabel: true,
          width: '30%'
        }, {
          show: false,
          left: '52%',
          top: '10%',
          bottom: '5%',
          width: '0%'
        }, {
          show: false,
          right: '10%',
          top: '10%',
          bottom: '5%',
          containLabel: true,
          width: '30%'
        }],
        xAxis: [{
          type: 'value',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          position: 'top',
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        }, {
          gridIndex: 1,
          show: false
        }, {
          gridIndex: 2,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          position: 'top',
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          position: 'right',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: myData
        }, {
          gridIndex: 1,
          type: 'category',
          inverse: true,
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            }
          },
          data: myData.map(function (value) {
            return {
              value: value,
              textStyle: {
                align: 'center'
              }
            }
          })
        }, {
          gridIndex: 2,
          type: 'category',
          inverse: true,
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false

          },
          data: myData
        }],
        series: [
          {
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                show: true,
                color: 'rgba(7,124,220,0.12)'
              }
            },
            barGap: '-100%',
            barWidth: '12',
            data: [100, 100, 100, 100, 100]
          },
          {
            name: data[0].name,
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                show: true,
                color: '#FFB936',
                borderWidth: 0,
                borderColor: '#f8d517'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'left',
                textStyle: {
                  color: 'rgba(255,255,255,.72)',
                  fontSize: 14,
                  rich: {
                    val: {
                      color: 'rgba(83,226,255,1)',
                      fontFamily: 'DINProMedium',
                      fontSize: 20
                    }
                  }
                },
                formatter: '{val|{c}}人'
              }
            },
            barWidth: '6',
            data: data[0].value.map(item => item.value)
          },
          {
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                show: true,
                color: 'rgba(7,124,220,0.12)'
              }
            },
            barGap: '-100%',
            barWidth: '12',
            data: [100, 100, 100, 100, 100]
          },
          {
            name: data[1].name,
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                show: true,
                color: '#04C1FF',
                borderWidth: 0,
                borderColor: '#f39c11'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  color: 'rgba(255,255,255,.72)',
                  fontSize: 14,
                  rich: {
                    val: {
                      color: 'rgba(83,226,255,1)',
                      fontFamily: 'DINProMedium',
                      fontSize: 20
                    }
                  }
                },
                formatter: '{val|{c}}人'
              }
            },
            barWidth: '6',
            data: data[1].value.map(item => item.value)
          }
        ]
      }
    }
  },
  methods: {
    // 判断数组array1中是否含有数组array2
    arrayHasElement (array1, array2) {
      for (const index1 in array1) {
        if (array1[index1].length === array2.length) {
          for (const index2 in array1[index1]) {
            if (array1[index1][index2].join() !== array2[index2].join()) {
              break
            }
            // 到最后一个元素都没有出现不相等，就说明这两个数组相等
            if (Number(index2) === (Number(array1[index1].length) - 1)) {
              return {
                identical: true,
                index: index1
              }
            }
          }
        }
      }
      return {
        identical: false,
        index: -1
      }
    },
    // 地图标点点击的回调
    onMarkerClick (pointObj) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0004',
        data: {
          year: '2021',
          schoolId: pointObj.id
        }
      }).then((res) => {
        const result = res.result
        if (result.asMapRegion) {
          let tempObj = {
            id: pointObj.id,
            arr: []
          }
          // 转换坐标（高德转百度）
          for (const item of result.asMapRegion) {
            tempObj.arr.push(this.transform(item[0], item[1]))
          }
          // 添加到覆盖物数组内
          this.polygon = [tempObj]
          // 设置地图中心坐标
          this.centerPoint = {...pointObj}
        }
      })
    },
    // 高德转百度坐标
    transform (lng, lat) {
      let val = 3.14159265358979324 * 3000.0 / 180.0
      const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * val)
      const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * val)
      const bLng = z * Math.cos(theta) + 0.0065
      const bLat = z * Math.sin(theta) + 0.006
      return [bLng, bLat]
    },
    // 获取学校总览信息
    getData1 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0001',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        // 学校总览信息
        this.baseinfo.schoolCount = result.schoolCount || '暂无数据'
        this.baseinfo.schoolIncreaseCount = result.schoolIncreaseCount || '暂无数据'
        this.baseinfo.data[0].schoolMbCount = result.schoolMbCount || '暂无数据'
        this.baseinfo.data[1].schoolGbCount = result.schoolGbCount || '暂无数据'
        this.baseinfo.data[0].percent = Math.round((Number(result.schoolMbCount) / Number(result.schoolCount)) * 10000) / 100 || '暂无数据'
        this.baseinfo.data[1].percent = Math.round((Number(result.schoolGbCount) / Number(result.schoolCount)) * 10000) / 100 || '暂无数据'

        // 近五年增长趋势
        const arr = result.zzqs.list
        const zzqsArr = []
        for (const index in arr) {
          const zzqsItem = {
            name: arr[index].name,
            value: []
          }
          for (const item2 of arr[index].data) {
            zzqsItem.value.push({name: item2.name, value: item2.value})
          }
          zzqsArr.push(zzqsItem)
        }
        this.zzqsdata = zzqsArr
      })
    },
    // 获取区域/学区排名信息
    getData2 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0006',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        if (!res.result) return
        const tempItem1 = {
          name: '学位数',
          value: []
        }
        const tempItem2 = {
          name: '预测需求数',
          value: []
        }
        for (const item of res.result) {
          tempItem1.value.push({
            name: item.streetName || '区域名称丢失',
            value: item.studentJhCount
          })
          tempItem2.value.push({
            name: item.streetName || '区域名称丢失',
            value: item.studentSlCount
          })
        }
        this.quyutopdata = [tempItem1, tempItem2]
      })
    },
    // 获取学校/学位排名信息
    getData3 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0005',
        data: {
          year: this.localYear,
          areaCode: '330783',
          pageNum: '0',
          pageSize: '50',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        this.top10data = res.result
      })
    },
    // 获取学校/学位地图信息
    getData4 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0003',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol,
          street: this.localcity,
          schoolName: this.searchtxt,
          pageNum: this.pageNum++,
          pageSize: 10
        }
      }).then((res) => {
        for (const item of res.result.list) {
          // 添加学校坐标
          this.pointArr.push({
            id: item.orgId,
            name: item.schoolName,
            imgColor: null,
            point: this.transform(Number(item.longitude), Number(item.latitude))
          })
        }
        this.hasNextPage = res.result.hasNextPage
        // 地图中心坐标
        this.centerPoint = this.pointArr[0]
        // this.centerPoint = {
        //   name: '东阳市人民政府',
        //   point: [120.248159, 29.296355]
        // }
      }).catch((err) => {
        console.log('err = ', err)
        this.hasNextPage = false
      })
    },
    // 获取地址总览信息
    getData5 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0002',
        data: {
          year: this.localYear,
          areaCode: '330783'
        }
      }).then((res) => {
        const result = res.result
        if (!result) return
        // 学校总览信息
        this.addressInfo.addressCount = result.addressCount || '暂无数据'
        this.addressInfo.addressIncreaseCount = result.addressIncreaseCount || '暂无数据'
        this.addressInfo.data[0].addressFpCount = result.addressFpCount || '暂无数据'
        this.addressInfo.data[1].addressWfpCount = result.addressWfpCount || '暂无数据'
        this.addressInfo.data[0].percent = Math.round((Number(result.addressFpCount) / Number(result.addressCount)) * 10000) / 100 || '暂无数据'
        this.addressInfo.data[1].percent = Math.round((Number(result.addressWfpCount) / Number(result.addressCount)) * 10000) / 100 || '暂无数据'
        // 学校地址数排名
        const schoolAddressCountList = result.schoolAddressCountList
        const addressTempArr = []
        for (const item of schoolAddressCountList) {
          addressTempArr.push({name: item.schoolName, value: item.addressCount})
        }
        this.schAddressArr = addressTempArr
        // 近五年学校地址增长趋势
        const tempArr = []
        let arr = result.zzqs.list
        for (const item of arr) {
          const temp = {
            name: '',
            value: []
          }
          temp.name = item.name
          for (const item2 of item.data) {
            temp.value.push({
              name: item2.name,
              value: item2.value
            })
          }
          tempArr.push(temp)
        }
        this.addressData = tempArr
        // 地址来源分析
        const addressSource = result.addressSource
        const data = [
          {name: '户籍', value: addressSource.houseHold},
          {name: '房产', value: addressSource.house},
          {name: '其他', value: addressSource.others}
        ]
        this.initPie(data)
      })
    },
    // 获取人数相关汇总信息
    getData6 () {
      console.log('EduAnalysisXq0007')
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0007',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        this.middata = {
          bdrs: result.bdrs,
          wdrs: result.wdrs,
          jhcount: result.jhcount,
          slcount: result.slcount
        }
      })
    },
    // 渐进加载坐标数据
    renovateData () {
      // 初始化地图标点数据
      this.clearOverlays = {
        flag: true
      }
      this.pointArr = []
      this.hasNextPage = true
      this.pageNum = 0
      const interval = window.setInterval(() => {
        console.log('this.hasNextPage = ', this.hasNextPage)
        this.hasNextPage ? this.getData4() : window.clearInterval(interval)
      }, 1000)
    },
    // 统计时间选择的回调
    onSelectChange () {
      this.getData1()
      this.getData2()
      this.getData3()
      this.getData6()
    },
    // 页面底部按钮点击的回调
    onBottomClick (schoolCategory) {
      this.schoolcontrol = schoolCategory
      this.pointArr = []
      this.polygon = []
      this.colorIndex = -1
      this.getData1()
      this.getData2()
      this.getData3()
      this.getData6()
      this.renovateData()
    },
    getBarOption (name) {
      if (this[name]) return this[name]
      return {}
    },
    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    compare (key) {
      return function (value1, value2) {
        var val1 = value1[key]
        var val2 = value2[key]
        return val2 - val1
      }
    },
    initPie (data) {
      const myChart = echarts.init(this.$refs.pieRef)
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            name: '地址来源',
            type: 'pie',
            radius: '90%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.6)'
              }
            }
          }
        ]
      })
    },
    // 年份列表初始化
    initYearList () {
      const tempArr = []
      let year = this.localYear
      let i = 5
      do {
        tempArr.push({
          label: year + '年', value: year
        })
        year = Number(year) - 1
        i--
      } while (i > 0)
      this.yearList = tempArr
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initYearList()
      this.getData1()
      this.getData2()
      this.getData3()
      this.renovateData()
      this.getData5()
      this.getData6()
    })
  },
  created () {
  }
}
</script>
<style scoped lang="less">
.btn {
  background-color: #0D2246;
  color: #49C5E3;
  border-color: #0A58A0;
}

.content-box {
  width: 1920px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.sidebox-xqfx {
  width: 450px;
  height: 960px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 2;
}

.bottom-xqfx {
  flex: 1;
  width: 940px;
  margin: 0 24px;
  position: absolute;
  left: 475px;
  bottom: 10px;
  z-index: 2;

  .mapbigbox {
    width: 1500px;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 100px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 1);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      &:hover {
        border: 1px solid #53E2FF;
      }

      p {
        width: 32px;
        height: 32px;
        line-height: 27px;
        margin-left: 12px;
        margin-right: 12px;
        text-align: center;
        color: rgba(7, 124, 220, 1);
        font-size: 32px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #53E2FF
        }
      }
    }
  }

  .schoolcontrolbox {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 158px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      cursor: pointer;

      &.active {
        font-size: 16px;
        background-image: linear-gradient(to bottom, #fff, #B6EAFF);
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: 0.96px;
        font-weight: bold;
      }
    }

    &.school0 {
      background: url(../assets/img/page/school0.svg) no-repeat center bottom;
    }

    &.school1 {
      background: url(../assets/img/page/school1.svg) no-repeat center bottom;
    }

    &.school2 {
      background: url(../assets/img/page/school2.svg) no-repeat center bottom;
    }

  }

  .mapcontrolbox {
    display: flex;

    p {
      line-height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
      cursor: pointer;
      margin-right: 15px;

      &.blue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(14, 45, 80, 0.5);
          border: 1px solid rgba(52, 178, 255, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(14, 45, 80, 0.5);
            border: 1px solid rgba(52, 178, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(52, 178, 255, 1)
          }
        }
      }

      &.green {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(2, 63, 34, 0.5);
          border: 1px solid rgba(0, 255, 61, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(2, 63, 34, 0.5);
            border: 1px solid rgba(0, 255, 61, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(0, 255, 61, 1)
          }
        }
      }

      &.lightblue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(0, 255, 243, 0.24);
          border: 1px solid #00FFF3;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(0, 255, 243, 0.24);
            border: 1px solid #00FFF3;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: #00FFF3
          }
        }
      }

      &.yellow {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(63, 46, 32, 0.5);
          border: 1px solid rgba(255, 185, 54, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(63, 46, 32, 0.5);
            border: 1px solid rgba(255, 185, 54, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 185, 54, 1)
          }
        }
      }

      &.red {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(67, 0, 0, 0.5);
          border: 1px solid rgba(255, 0, 0, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(67, 0, 0, 0.5);
            border: 1px solid rgba(255, 0, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 0, 0, 1)
          }
        }
      }
    }
  }

  .mapname {
    background: url("../assets/img/page/mapdot.svg") no-repeat left center;
    padding-left: 40px;

    p {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }

  }

  .midtopbox {
    width: 100%;
    height: 104px;
    background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

    .midtopcontent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.midbox-xqfx {
  flex: 1;
  width: 925px;
  margin: 0 24px;
  position: absolute;
  left: 475px;
  top: 110px;
  z-index: 2;

  .schoolcontrolbox {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 158px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      cursor: pointer;

      &.active {
        font-size: 16px;
        background-image: linear-gradient(to bottom, #fff, #B6EAFF);
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: 0.96px;
        font-weight: bold;
      }
    }

    &.school0 {
      background: url(../assets/img/page/school0.svg) no-repeat center bottom;
    }

    &.school1 {
      background: url(../assets/img/page/school1.svg) no-repeat center bottom;
    }

    &.school2 {
      background: url(../assets/img/page/school2.svg) no-repeat center bottom;
    }

  }

  .mapcontrolbox {
    display: flex;

    p {
      line-height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
      cursor: pointer;
      margin-right: 15px;

      &.blue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(14, 45, 80, 0.5);
          border: 1px solid rgba(52, 178, 255, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(14, 45, 80, 0.5);
            border: 1px solid rgba(52, 178, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(52, 178, 255, 1)
          }
        }
      }

      &.green {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(2, 63, 34, 0.5);
          border: 1px solid rgba(0, 255, 61, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(2, 63, 34, 0.5);
            border: 1px solid rgba(0, 255, 61, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(0, 255, 61, 1)
          }
        }
      }

      &.lightblue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(0, 255, 243, 0.24);
          border: 1px solid #00FFF3;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(0, 255, 243, 0.24);
            border: 1px solid #00FFF3;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: #00FFF3
          }
        }
      }

      &.yellow {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(63, 46, 32, 0.5);
          border: 1px solid rgba(255, 185, 54, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(63, 46, 32, 0.5);
            border: 1px solid rgba(255, 185, 54, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 185, 54, 1)
          }
        }
      }

      &.red {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(67, 0, 0, 0.5);
          border: 1px solid rgba(255, 0, 0, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(67, 0, 0, 0.5);
            border: 1px solid rgba(255, 0, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 0, 0, 1)
          }
        }
      }
    }
  }

  .mapname {
    background: url("../assets/img/page/mapdot.svg") no-repeat left center;
    padding-left: 40px;

    p {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }

  }

  .midtopbox {
    width: 100%;
    height: 104px;
    background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

    .midtopcontent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.rightbox-xqfx {
  width: 470px;
  height: 960px;
  //background: url(../assets/img/page/rightbg.svg) no-repeat left top;
  position: absolute;
  top: 104px;
  right: 14px;
  z-index: 2;

  .popboxtitle {
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.84px;
  }

  .poptitlebox {
    height: 64px;
    background: url("../assets/img/page/popdot1.svg") no-repeat left center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 75px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(7, 124, 220, 0.24);
    position: relative;

    &:before {
      content: '';
      width: 24px;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: -1px;
      background: #077CDC;
    }

    &:after {
      content: '';
      width: 24px;
      height: 1px;
      position: absolute;
      right: 0;
      bottom: -1px;
      background: #077CDC;
    }

    .poptype {
      width: 46px;
      height: 20px;
      line-height: 20px;
      background: #F07700;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      margin-right: 15px;
    }

    .poptitle {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }

    .topopinfo {
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      position: absolute;
      right: 0;
      background: url("../assets/img/page/toinfo.svg") no-repeat right center;
      padding-left: 15px;
      padding-right: 20px;
      text-align: right;
    }
  }

  .tjbox1 {
    width: 200px;
    height: 146px;
    background: url("../assets/img/page/tjbg1.svg") no-repeat left top;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    p {
      font-size: 14px;
      color: #fff;

      &.tjval {
        height: 70px;
        width: 100%;
        text-align: center;
        background: url("../assets/img/page/dotbottom.svg") no-repeat center bottom;
      }

      span {
        font-size: 20px;
        letter-spacing: 1.2px;
      }
    }
  }
}

.container {
  position: relative;
  width: 1920px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;

  &_top-xqfx {
    width: 1920px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 72px;
    background: url("../assets/img/page/titlebg.svg") no-repeat left top /100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      width: 516px;
      height: 40px;
      background: url("../assets/img/page/menu_1.svg") no-repeat left top /100% 100%;
      margin-left: 20px;
      display: flex;

      p {
        width: 138px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #53E2FF;
        letter-spacing: 0.96px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #B4F2FF;
          font-weight: bold;
        }
      }
    }

    .topright {
      width: 516px;
      margin-right: 20px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    p {
      flex: 1;
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .tjbox2 {
    width: 100%;
    height: 40px;
    background: rgba(7, 124, 220, .12);
    border-top: 1px solid rgba(7, 124, 220, 0.24);
    border-bottom: 1px solid rgba(7, 124, 220, 0.24);
    position: relative;

    &:before {
      content: '';
      width: 24px;
      height: 1px;
      position: absolute;
      left: 0;
      top: -1px;
      background: #077CDC;
    }

    &:after {
      content: '';
      width: 24px;
      height: 1px;
      position: absolute;
      right: 0;
      bottom: -1px;
      background: #077CDC;
    }

    p {
      font-size: 14px;
      color: #fff;

      span {
        font-size: 20px;
        color: #53E2FF;
        letter-spacing: 1.2px;
      }
    }
  }

  .bmap {
    width: 1500px;
    height: 100%;
    position: absolute;
    left: 210px;
    top: 0;
    z-index: 0;
    //background-color: #5daf34;
  }

  .popbox {
    width: 474px;
    height: 768px;
    background: url("../assets/img/page/popbg.svg") no-repeat left top;
    position: absolute;
    top: 220px;
    right: 482px;
    z-index: 99;

    &_content {
      height: 730px;
      padding: 16px 16px 16px 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.subtitle {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;

  p {
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }
  }
}

.maintitle {
  width: 100%;
  height: 40px;
  background: url("../assets/img/page/maintitle.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }

    &:after {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      background: url(../assets/img/page/titleright.svg) no-repeat right center;
      animation: cubeshow2 3s linear infinite forwards;
    }
  }
}

.baseprogresslist {
  margin-top: 5px;

  p {
    line-height: 32px;
  }

  &_0 {
    p {
      &:nth-child(1) {
        &::before {
          width: 8px;
          height: 8px;
          content: '';
          background: #46C88C;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }

  &_1 {
    p {
      &:nth-child(1) {
        &::before {
          width: 8px;
          height: 8px;
          content: '';
          background: #FFB936;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }
}

@keyframes cubeshow2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
    //  transform: rotate(0) scale(1);
  }
}

@keyframes cubeshow1 {
  0% {
    opacity: 0;
    transform: translateX(10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
    //  transform: rotate(0) scale(1);
  }
}

.mainbox {
  width: 100%;
  height: 190px;
  background-image: linear-gradient(to right, #113448, #091220);
  box-shadow: 0 0 7px 7px #113448;
  border-radius: 12px;

  &_content {
    padding: 0 16px;
  }
}

.listbox {
  width: 50%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.listbox0 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox1 {
    background: url("../assets/img/page/pdot2.svg") no-repeat left center;
  }

  &.listbox2 {
    background: url("../assets/img/page/pdot3.svg") no-repeat left center;
  }

  &.listbox3 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  p {
    margin-left: 85px;

    &.listval {
      line-height: 42px;
      font-size: 24px;
      color: #53E2FF;
      letter-spacing: 1.44px;
      font-weight: bold;
    }

    &.listname {
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
    }
  }

}

.yzjzbox {
  width: 100%;
  margin: 0 auto;
  height: 190px;
  position: relative;

  p {
    text-align: center;
  }

  .yzjzcircle {
    width: 118px;
    height: 118px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /118px 118px;
    position: absolute;
    left: 39px;
    top: 30px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle1 {
    width: 80px;
    height: 80px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /80px 80px;
    position: absolute;
    left: 27px;
    top: 25px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle2 {
    width: 64px;
    height: 64px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /64px 64px;
    position: absolute;
    left: 20px;
    top: 14px;
    animation: rotate1 3s linear infinite forwards;
  }
}

.normaltxt {
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.84px;

  span {
    font-size: 16px;
    letter-spacing: 0.96px;
    font-weight: bold;
    padding: 0 10px;

    &.keyyellow {
      color: #FFB936;
    }

    &.up {
      background: url("../assets/img/page/dotup.svg") no-repeat left center;
      padding-left: 20px;
    }

    &.keyblue {
      color: #53E2FF;
    }
  }
}

.xuexiaolistbox {
  width: 136px;
  height: 84px;
  background: #0D2246;
  border: 1px solid rgba(1, 66, 120, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 2px;

  &.active {
    border: 1px solid rgba(83, 226, 255, 1);
  }

  p {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
  }
}

.flexbetween {
  display: flex;
  justify-content: space-between;
}

.flexbox {
  display: flex;
  align-items: center;
}

.flexcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.progressbox1 {
  width: 418px;
  height: 12px;
  background: rgba(7, 124, 220, .12);
  margin-right: 10px;
  margin-top: 5px;
  display: flex;

  .progresscurbox0 {
    height: 8px;
    background: #46C88C;
    margin-top: 2px;
  }

  .progresscurbox1 {
    height: 8px;
    margin-top: 2px;
    margin-left: 2px;
    background: #FFB936;
  }
}

.progressbox2 {
  width: 240px;
  height: 12px;
  background: rgba(7, 124, 220, .12);
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 20px;
  display: flex;

  .progresscurbox0 {
    height: 4px;
    background: #FFB936;
    margin-top: 4px;
    margin-left: 2px;
  }

  .progresscurbox1 {
    height: 4px;
    margin-top: 4px;
    margin-left: 2px;
    background: #04C1FF;
  }
}

.wrap-table {
  width: 100%;
  border-spacing: 0
}

.wrap-table table {
  width: 100%;
}

.wrap-table.head tr th {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: rgba(7, 124, 220, .24);
}

.wrap-table.body tr {
  td {
    font-size: 14px;
    padding: 8px 2px;
    text-align: center;
    letter-spacing: 0.84px;
    color: rgba(255, 255, 255, .72);
    background: rgba(7, 124, 220, .12);

    .progressbox1 {
      width: 180px;
      height: 12px;
      background: rgba(7, 124, 220, .12);
      position: relative;
      margin-right: 10px;
      margin-top: 5px;

      .progresscurbox {
        height: 4px;
        position: absolute;
        left: 4px;
        top: 4px;
        background: rgba(4, 193, 255, 1);

        &.progress0 {
          background: #FFB936;
        }
      }
    }

    p {
      &.sortN0 {
        color: #FFB936;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          content: 'NO.';
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }

  &:nth-child(odd) {
    td {
      background: rgba(7, 124, 220, .04);
    }
  }

}

.wrap-table.body tr td.keyblue {
  font-size: 14px;
  color: #05D7FF;
  font-weight: 600;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/*下拉框*/
/deep/ .el-input {
  font-size: 16px;
  color: #FFFFFF;
}

/deep/ .el-input__inner {
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  color: #53E2FF;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: #53E2FF;
  }
}

/deep/ .el-select-dropdown__item {
  color: #fff;
}

/deep/ .el-select:hover .el-input__inner {
  border-color: #6ABEFF
}

/deep/ .el-select-dropdown {
  background: rgba(3, 32, 64, 0.80);
  border: 1px solid rgba(61, 82, 103, 1);
  border-radius: 8px;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

/deep/ .el-popper .popper__arrow::after {
  border-width: 0;
}

/deep/ .el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: transparent;
}

/deep/ .el-select-dropdown__item.selected {
  background: rgba(106, 190, 255, 0.16);
  color: #6ABEFF;
  font-weight: normal;
}

/deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover {
  background: rgba(106, 190, 255, 0.16);
}

/deep/ .el-radio {
  font-size: 16px;
  color: #53E2FF;
  letter-spacing: 0.96px;
}
</style>
